<!DOCTYPE html>
<html lang="zh" xmlns:wicket="">
<head>
    <wicket:remove>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </wicket:remove>
    <wicket:link>
        <link rel="stylesheet" href = "../css/bootstrap.min.css">
        <link rel="stylesheet" href = "../css/testbook.css">
        <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
        <script type="application/javascript" src="../js/jquery-1.9.0.min.js"></script>
        <script type="application/javascript" src="../js/bootstrap.min.js"></script>
        <script type="application/javascript" src="../js/moment-with-locales.js"></script>
        <script type="application/javascript" src="../js/bootstrap-datetimepicker.min.js"></script>
    </wicket:link>
    <title>BooksTest</title>
    <script>
        $('#startTime').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            defaultDate: "1990-1-1"
        });
        $('#endTime').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            defaultDate: "1990-1-1"
        });

        $(function () {
            $('#startTime').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
        });
        $(function () {
            $('#endTime').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
        });
    </script>
</head>
<body>
    <div class="container-fluid">
        <h1><span class="glyphicon glyphicon-book"></span>《圖書管理》</h1>
        <hr>
        <div class="search-bar">
            <form action="#" method="post" class="form-inline">
                <div class="form-group">
                    <label for="code">代碼</label>
                    <input type="text" id="code" placeholder="請輪入書籍代碼" class="form-control"/>
                </div>
                <div class="form-group">
                    <label for="name">書名</label>
                    <input type="text" id="name" placeholder="請輪入書名" class="form-control"/>
                </div>
                <div class="form-group">
                    <label for="author">作者</label>
                    <input type="text" id="author" placeholder="請輪入作者" class="form-control"/>
                </div>
                <label for="startTime">出版日期</label>
                <div class="form-group">
                    <div class='input-group' id='startTime'>
                        <input type='text' class="form-control" placeholder="开始日期"/>
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                    </div>
                </div>
                <label for="endTime">至</label>
                <div class="form-group">
                    <div class='input-group' id='endTime'>
                        <input type='text' class="form-control" placeholder="结束日期"/>
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary" id="search">查詢</button>
                    <button type="reset" class="btn btn-default" id="reset">重置</button>
                    <button type="submit" class="btn btn-warning" id="insert">新增</button>
                </div>
            </form>
        </div>
        <div class="showTable">
            <table class="table table-bordered table-hover">
                <tr class="active">
                    <th>ID</th>
                    <th>代碼</th>
                    <th>名稱</th>
                    <th>作者</th>
                    <th>出版日期</th>
                    <th>創建時間</th>
                    <th>更新時間</th>
                </tr>
            </table>
        </div>

    </div>
</body>
</html>